<template>
    <Row>
        <Col span="6" style="overflow:auto;padding:1em;">
            <p v-for="(item, key) in data" :key="key" @click="handleSelect(key)" :style="{backgroundColor:current_model_key==key?'#f8f8dd':'', cursor:'pointer'}">
                <span>{{key}}</span>
            </p>
        </Col>
        <Col span="18" style="border-left:1px solid #eee;overflow:auto;padding:1em;">
            <ul class="ivu-list">
                <li class="ivu-list-item">
                    <h3>{{current_model_key}}</h3>
                    <Table :data="table_data" :columns="columns"></Table>
                </li>
            </ul>
        </Col>
    </Row>
</template>
<script>
export default {
    components: {
    },
    data() {
        return {
            data: {},
            current_model_key: "",
            columns: [
                { title: "状态码", key: "code", width: 150 },
                { title: "描述", key: "description" }
            ]
        };
    },
    computed: {
        table_data() {
            var temp = [];
            if(this.current_model_key == "") return temp;
            for(var key in this.data[this.current_model_key]) {
                temp.push({
                    code: key,
                    description: this.data[this.current_model_key][key]
                });
            }
            return temp;
        }
    },
    methods: {
        handleSelect(key) {
            this.current_model_key = key;
        }
    },
    created() {
        this.ajax.post("common/status_code").then( res => {
            this.data = res.data.data;
        });
    }
};
</script>

<style scoped>
</style>
